<template>
<!--  <p style="text-align:center">南宁软件园中心 - 梁世燊 - JSDTN240308 - 潘嘉嘉</p>-->
<!--首页-->
 <div class="header">
  <img src="https://www.atzuche.com/static/media/pc-banner-20231026.8e45f667.png" alt="">
   <div class="main-register">
     <h4 style="margin-top: 0;font-size: 18px;">注册/登陆</h4>
     <el-form ref="formRef" :model="formData" :rules="formRules" size="large"
              @submit.native.prevent @keyup.enter.native="handleLogin">

       <el-form-item prop="phone" >
         <el-input v-model="formData.account" placeholder="请输入手机号"></el-input>
       </el-form-item>
       <el-form-item prop="phone" >
         <el-input type="password" v-model="formData.password" placeholder="请输入密码"></el-input>
       </el-form-item>
       <!-- 验证码 -->
       <el-form-item prop="captcha">
         <el-input v-model="formData.captcha" placeholder="验证码">
           <template #prefix>
             <el-icon class="el-input__icon"><Picture/></el-icon>
           </template>
           <template #suffix>
             <el-image class="captcha-image" :src="captchaBase64" @click="getCaptcha" title="点击更换"/>
           </template>
         </el-input>
       </el-form-item>
       <div style="font-size: 13px;margin-bottom: 12px;">
         <input type="checkbox" style="height: 14px;width: 14px;padding: 0;vertical-align: middle;"  v-model="agreeTerm" >
         <a>我同意</a><a style="color:darkorange">凹凸租车会员服务协议</a>和<a style="color:darkorange">凹凸租车隐私协议</a><span v-if="agreeTerm===false && firstClick===false" style="float: right; color: rgb(255, 106, 0)">请阅读并同意协议</span>
       </div>
       <el-row :gutter="10">
         <el-col :span="12">
           <el-button type="info" style="width: 100%;height: 40px;" @click="register" >注册</el-button>

         </el-col>
         <el-col :span="12">
           <el-button type="success" style="  width: 100%;height: 40px;color: #fff;background-color: mediumseagreen" @click="handleLogin" >登陆</el-button>
         </el-col>

       </el-row>

<!--       <p style="font-size: 10px;margin: 20px 0 0;text-align: center;" >还没账号?<a style="color: darkorange" @click="signup">>>点击注册</a></p>-->
<!--       <p style="font-size: 10px;margin: 20px 0 0;text-align: center;" >让你的闲置车辆开始挣钱,<a style="color: darkorange">成为凹凸车主></a></p>-->

     </el-form>

   </div>
 </div>
  <div class="main">
    <div class="main-goodponit">
      <ul>
        <li>
          <div class="card">
            <el-icon size="50px"><Umbrella /></el-icon>
            <h3>高额度保障<br>保障无忧用车</h3>
            <p>全方位保障<br>用车更安心</p>
          </div>
        </li>
        <li>
          <div class="card">
            <el-icon size="50px"><RefreshRight /></el-icon>
            <h3>免租车押金<br>更低门槛</h3>
            <p>芝麻信用分达到650分以上<br>就可以免租车押金</p>
          </div>
        </li>
        <li>
          <div class="card">
            <el-icon size="50px"><Iphone /></el-icon>
            <h3>手机在线下单<br>流程一目了然</h3>
            <p>押金支付，用车流程，违章理赔<br>app里全搞定</p>
          </div>
        </li>
        <li>
          <div class="card">
            <el-icon size="50px"><userFrom /></el-icon>
            <h3>车管家取送车<br>上门服务</h3>
            <p>车管家带您无忧换车</p>
          </div>
        </li>
      </ul>
    </div>
<!--more-->
    <div class="main-title" style="text-align: center;">
          <h2 >支持全国150个城市 各种车型任您选择</h2>
          <h3 >上海、北京、广州、深圳、南京、杭州、苏州、成都、重庆…</h3>
    </div>
    <div class="main-carlist ">
      <el-row :gutter="24" style="box-shadow: none">
        <el-col :span="8" v-for="p in productArr"  style="box-shadow: none" >
          <img :src="p.url" style="width: 100%">
          <el-card style="box-shadow: none;border: none;font-family:'黑体';" >
            <div style="margin:0px 0px 80px 0px">
               <span style="float:left;color:black;">
                 {{p.title}}
               </span>
              <span style="float: right;color:red;">{{p.name}}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <p style="margin: 0 auto">每台车主都有各自的定价方案，平台还有各种优惠卷可供您使用,具体价格可参见APP</p>
    <div class="more-car" >
      <span style="text-align: center;color: #42b983">查看更多车辆</span>
      <img src="">
      <template>
        <el-popover
            placement="top-start"
            title="Title"
            :width="200"
            trigger="hover"
            content="查看更多车辆 请下载凹凸租车APP">
          <template #reference>
            <el-button class="m-2">查看更多车辆</el-button>
          </template>
        </el-popover>
      </template>
    </div>
<!--    租车时长-->
    <div class="main-title" style="text-align: center;">
      <h2>长租、短租、超短租… 各种租车方式应有尽有</h2>
      <h3>长租更划算、短租更快捷、超短租更随意</h3>
    </div>
    <div class="main-app">
      <ul>
        <li style="background-image: url(https://www.atzuche.com/static/media/rentway1.b5621f1a.png);">
          <div class="main-app-text" >
            <h3>短租</h3>
            <span>8小时起租</span>
            <p>适合家庭、朋友出游时使用，或临时工作代步或商务接客用车。别克GL8、丰田SUV、敞篷跑车……各车型随你选。</p>
          </div>
        </li>
        <li style="background-image: url(https://www.atzuche.com/static/media/rentway2.e61c20e7.png);">
          <div class="main-app-text">
            <h3>长租</h3>
            <span>一个月起租</span>
            <p>适合商务用车，或个人日常代步用车，费用更划算。车型配有经济型、舒适型、SUV、MPV、豪华型、尊贵型等车型，满足您的多层次用车体验。</p>
          </div>
        </li>
        <li style="background-image: url(https://www.atzuche.com/static/media/rentway3.15796cae.png);">
          <div class="main-app-text" >
            <h3>超短租</h3>
            <span>不限时间</span>
            <p>适合市内临时用车需求，比如上下班使用。找车方便，停车灵活，费用低廉，随取随还。现为凹凸租车旗下独立APP“凹凸共享车”。</p>
          </div>
        </li>
      </ul>
    </div>
    <div class="more-car">
      <el-popover
          placement="top-start"
          :width="200"
          trigger="hover">
        <template slot="content">
          <div style="text-align: center;">
            <img src="https://cdn.atzuche.com/pc/qr/app.png" alt="图片显示错误">
            <span>查看更多内容<br>请下载<a href="#">凹凸汽车</a>APP</span>
          </div>
        </template>
        <template #reference>
          <span style="text-align: center;color: #42b983">查看更多租车方式</span>
        </template>
      </el-popover>

    </div>
    <div class="main-appview">
      <div class="main-title" >
        <h2>凹凸汽车<br> <span style="font-size: 30px" >跟着好奇心出发</span></h2>
        <h3 style="color: #a0a0a0;">短租、长租、时租、自助找车、快捷租车……
          <br>万款车型，随您选择</h3>
        <div class="main-appview-button" style="margin: 80px 0px 80px 0px">
          <el-button round type="success">下载APP</el-button>
        </div>
        <a style="float: left;width: 180px;height: 21px;" >隐私协议</a>
        <a style="float: left;width: 180px;height: 21px;">用户权限</a>
        <br>
        <p>开发者名称：上海馨煜信息科技有限公司</p>
        <p>更新时间:</p>
      </div>
      <div class="main-appview-right" >
        <img src="https://gd-hbimg.huaban.com/fab164c51b2968ffbd47191874573707b3155d4f20a51-A6vpu8_fw240webp">
        <img src="https://gd-hbimg.huaban.com/645454412dab5997baebd766d0153f9983ee2af44aafd-QAoAC6_fw240webp">
        <img src="https://gd-hbimg.huaban.com/9575271062fc11d7a247501c95552a4171e7bced35e37-hkLRUE_fw240webp">
      </div>
    </div>
  </div>

</template>

<script setup>
import {ref} from 'vue'
import {ElMessage} from 'element-plus'
import router from '@/router'

import request from '@/utils/request';
const qs = require('qs');
import store from "@/store";


const productArr = ref([
  {title: "高尔夫 R", name: "5.0分", url: "https://www.atzuche.com/static/media/car2.dd042d39.jpg"},
  {title: "宝马 Z4", name: "5.0分", url: "https://www.atzuche.com/static/media/car2.dd042d39.jpg"},
  {title: "特斯拉 Model S", name: "5.0分", url: "https://www.atzuche.com/static/media/car3.ca0216c8.jpg"},
  {title: "福特 野马", name: "5.0分", url: "https://www.atzuche.com/static/media/car4.7b0694ab.jpg"},
  {title: "宝马 5系", name: "5.0分", url: "https://www.atzuche.com/static/media/car5.2eb99e19.jpg"},
  {title: "奥迪 A7", name: "5.0分", url: "https://www.atzuche.com/static/media/car6.b1508805.jpg"},
  {title: "雪佛兰 科迈罗", name: "5.0分", url: "https://www.atzuche.com/static/media/car7.6030eb56.jpg"},
  {title: "MINI ONE", name: "5.0分", url: "https://www.atzuche.com/static/media/car8.55b03b41.jpg"},
  {title: "保时捷 911", name: "5.0分", url: "https://www.atzuche.com/static/media/car9.d4efc378.jpg"},
]);
const userFrom=ref({username:'',password:''})

const loading = ref(false)
const formRef = ref()


const formData = ref({
  account: undefined,
  password: undefined,
  captchaKey: undefined,
  captcha: undefined

})
let agreeTerm = ref(false)
let firstClick = ref(true)
//登陆
const formRules = ref({
  account: [{required: true, message: '请输入账号'}],
  captcha: [{required: true, message: '请输入验证码'}],
  password: [{required: true, message: '请输入密码'}]
})


const handleLogin = () => {
  formRef.value.validate((valid) => {
    if (!valid) {
      ElMessage.error('请正确填写参数')
      return
    }
    if(!agreeTerm.value){
      firstClick.value=false
      return
    }
    login('/','登录成功')

  })
}
const login = (path,msg)=>{
  loading.value = true

  request.post('/users/login', formData.value)
      .then(res => {
        localStorage.setItem('perms', res.data.perms)
        localStorage.setItem('nick', res.data.nickname)
        localStorage.setItem('avatar', res.data.avatar)
        localStorage.setItem('token', res.data.token)
        let redirect = router.currentRoute.value.query?.redirect
        router.push({path: redirect || '/'})

        router.push({path: path}).then(()=>{
          location.reload()
        })
        ElMessage.success(msg)
      })
      .catch(() => {
        getCaptcha()
        loading.value = false
      })

}

//注册
const register = ()=>{
  formRef.value.validate((valid) => {

    if (!valid) {
      ElMessage.error('请正确填写参数')
      return
    }
    if(!agreeTerm.value){
      firstClick.value=false
      return;
    }
    loading.value = true

    request.post('/users/register', formData.value)
        .then(res => {
          localStorage.setItem('perms', res.data.perms)
          localStorage.setItem('nick', res.data.nickname)
          localStorage.setItem('avatar', res.data.avatar)
          localStorage.setItem('token', res.data.token)
          let redirect = router.currentRoute.value.query?.redirect
          router.push({path: redirect || '/'})

          router.push({path: '/center'}).then(()=>{
            location.reload()
          })
          ElMessage.success('注册成功')
        })
        .catch(() => {
          getCaptcha()
          loading.value = false
        })

  })
}
// 验证码
const captchaBase64 = ref(undefined)
const getCaptcha = () => {
  let r = Math.random()
  request.get(`/api/captcha?r=${r}`).then(res => {
    formData.value.captchaKey = res.data.captchaKey
    captchaBase64.value = res.data.captchaBase64
  })
}
getCaptcha()

</script>

<style scoped>
body{
  margin: 0;
  padding: 0;
}
.header{
  margin:0 auto;
  height: 100%;
  position: relative;
}
.header>img{
  width: 100%;
  object-fit: cover; /* 保持原图宽高比并填充容器 */
}
.main{
  height: 100%;
  width: 1200px;
  margin: 40px auto 0;
  overflow: hidden;
}
.main-register{
  box-sizing: border-box;
  width: 342px;
  padding: 28px 36px;
  background-color: #ffffff;
  margin: 0 auto;
  position: absolute;
  right: 10%;
  top : 20px ;
  z-index: 10;
  box-shadow: 0 25px 60px 0 rgba(0,100,115,.15);
}
.main-register required{
  position: absolute;
  right: 200px;
}
.main-register input{
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  margin-bottom: 10px;
  background-color: #f5f5f5;
  font-size: 12px;
  padding-left: 15px;
  padding-right: 10px;
  border: 1px solid #f5f5f5;
  outline-style: none;
}
.main a{ color: #13ce66}
.main-goodponit{
  height: 299px;
  margin: 0 auto;
}
.main .main-goodponit ul{
  list-style-type: none;
  display: flex;
  width: 100%;
  margin: 0 auto;
}
.main .main-goodponit li{
  text-align: left;
  margin: 51px 125px 60px 50px;
  width: auto;
  height: 80px;
  padding: 0px;
}
.main .main-goodponit h3{
  font-size: 20px;
  font-family: "华文宋体";
}
.main .main-goodponit p{
  color: #a0a0a0;
  font-size: 10px;
}
.main-more h2 {
  margin: 0px 0px 20px 0px;
}
.main-more h3{
  margin: 0px 0px 50px 0px;
}
.more-car{
  height: 80px;
  margin: 30px 0px 30px 0px;
}
.main-app ul{
  display: flex;
  list-style-type: none;
  width: 1200px;
  margin: 0px 0px 60px 0px;
}
.main-app li{
  width: 380px;
  height: 520px;
  text-align: left;
  padding-bottom: 20px;
  margin: 0px 30px 0px 0px ;
  background-size: cover;
  border-radius: 8px;
  background-color: rgba(0,0,0,1);
  background-image: linear-gradient(to top, rgba(0,0,255,0.3), rgba(0,0,255,0));

}
.main-app-text{
  margin: 0 auto;
  padding: 310px 26px 0px;
}
.main-title{
  margin: 0px 0px 50px 0px
}
.main-title h2{
  margin: 0px 0px 20px 0px;
  font-size: 30px
}
.main-title h3{
  margin-bottom: 50px;
  color: #a0a0a0;
}
.more-car{
  height: 60px;
  -webkit-box-shadow: 0 15px 50px 0 rgba(0,100,115,.15);
  box-shadow: 0 15px 50px 0 rgba(0,100,115,.15);
  border-radius: 4px;
  line-height: 60px;
  font-size: 14px;
  color: #37af83;
  text-align: center;
  margin-bottom: 120px;
}
.main-appview{
  height: 480px;
  width: 100%;
  margin: 20px 0px 0px 0px ;
  text-align: left;
}
.main-appview-right{
  width: 911px;
  height: 540px;
  left: 400px;
  bottom: 520px;
  position: relative;
}
.main-appview-right img{
  border-radius: 10px;
  width: 230px;
  height: 500px;
  margin: 0px 15px 0px 17px;
  box-shadow: 0px 0px 9px 1px black;
}
</style>
